<template>
    <div style="height: 360px">
        <div  class="devicePanel" v-for="(i,index) in deviceList" :key="index" >
            <img class="device-bg" v-if="i.status === 0" src="@/assets/monitor/device_layout.png" alt="">
            <img class="device-bg" v-if="i.status === 1" src="@/assets/monitor/device_outline.png" alt="">
            <img class="device-bg" v-if="i.status === 2" src="@/assets/monitor/device_error.png" alt="">
            <div :class="['name','name-'+i.status]">{{i.name}}</div>
            <div :class="['type','type-'+i.status]">{{i.type}}</div>
            <div class="status-item">
                <div :class="['status-point',i.status===0?statusMap[0]:'']" />
                <div :class="['status-point',i.status===1?statusMap[1]:'']" />
                <div :class="['status-point',i.status===2?statusMap[2]:'']" />
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "DevicePanel",
        props: ['deviceList'],
        data(){
            return{
                statusMap : [
                    'status-point-online', // 在线
                    'status-point-outline',//离线
                    'status-point-error' // 异常
                ]
            }
        }
    }
</script>

<style scoped lang="less">
    .devicePanel {
        width: 360px;
        height: 80px;
        margin-bottom: 10px;
        position: relative;
        .device-bg{
            position: absolute;
            left: 0;
            top: 0;
            width: 360px;
            height: 80px;
        }
        .name{
            position: absolute;
            left: 90px;
            top: 14px;
            font-size: 20px;
            color: #F8733B;
            font-family: 'ziticqtezhanti';
        }

        .type{
            position: absolute;
            left: 90px;
            top: 44px;
            font-size: 14px;
            color: #FFFFFF;
        }
        .name-1,.type-1{
            color: #979797;
        }
        .name-2,.type-2{
            color: #FF4A47;
        }
        .status-item{
            position: absolute;
            top: 16px;
            right: 16px;
            box-sizing: border-box;
            .status-point{
                width: 10px;
                height: 10px;
                border-radius: 100%;
                margin-bottom: 10px;
                background: rgba(7,7,7,0.30);
                border: 1px solid rgba(77,77,77,1);

            }
            .status-point-online{
                background: #F8733B;
                box-shadow: 0px 0px 8px 0px rgba(247,115,59,1);
            }
            .status-point-outline{
                background: #07FFFF;
                box-shadow: 0px 0px 8px 0px rgba(3,255,255,1);
            }
            .status-point-error{
                background: #FF4A47;
                box-shadow: 0px 0px 8px 0px rgba(254,74,72,1);
            }
        }
    }

</style>
